<template>
  <div>
      <v-card hover>
          <chart :options="option" auto-resize style="width:100%"></chart>
      </v-card>
  </div>
</template>

<script>
import ECharts from 'vue-echarts'
export default {
  components: {
    chart: ECharts
  },
  data: () => ({
    option: {
      title: {
        text: '各区平均房价对比'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      yAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      xAxis: {
        type: 'category',
        data: []
      },
      toolbox: {
        show: true,
        x: 'right',
        y: 'top',
        feature: {
          dataZoom: {
            xAxisIndex: 'none'
          },
          dataView: { readOnly: false },
          magicType: { type: ['line', 'bar'] },
          restore: {},
          saveAsImage: {}
        }
      },
      series: [
        {
          name: '',
          type: 'bar',
          data: [],
          markLine: {
            itemStyle: {
              normal: {
                borderWidth: 1,
                lineStyle: {
                  type: 'dash',
                  color: '#000 ',
                  width: 2
                }
              }
            },
            data: [
              {type: 'average', name: '平均值'}
            ]
          }
        }
      ]
    }
  }),
  mounted () {
    let tvm = this
    this.axios.get('/api/getavgbyqu')
    .then(function (response) {
      for (let i = 0; i < response.data.length; i++) {
        tvm.option.xAxis.data.push(response.data[i]._id)
        tvm.option.series[0].data.push({value: response.data[i].avg.toFixed(2), name: response.data[i]._id})
      }
      tvm.qus = response.data
    })
    .catch(function (err) {
      console.log(err)
    })
  }
}
</script>

